<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>多行文字居中</title>
    <style type="text/css">

        .box {
            margin: 40px auto;
            border: 1px solid #ccc;
            width: 300px;
            height: 300px;
            display: table;
        }

        .box span {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>
            <p>多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。多行文本垂直居中。</p>
        </span>

    </div>
</body>

</html>